<template>
  <q-dialog :value="!!value" @hide="onHide">
    <div class="bg-white" :style="{minWidth: $q.screen.lt.sm ? '360px' : '540px', maxWidth: $q.screen.lt.md ? '100vw' : '60vw'}">
      <div v-if="title" class="q-px-md border-bottom-1-eee">
        <div class="row items-center q-my-sm text-grey-9">
          <q-icon v-if="icon" :name="icon" class="q-mr-sm size-20"></q-icon>
          <div class="q-title bold col">{{ title }}</div>
          <q-btn color="grey-9" flat round icon="close" @click="$emit('input', false)"/>
        </div>
      </div>
      <div class="q-pa-md">
        <slot></slot>
      </div>
    </div>
  </q-dialog>
</template>

<script>
    export default {
      name: 'aDialog',
      props: {
        title: {
          type: String,
          required: false
        },
        value: {
          required: false,
          default: false
        },
        icon: {
          type: String,
          required: false
        }
      },
      data () {
        return {
        }
      },
      methods: {
        onHide () {
          this.$emit('input', false)
          this.$emit('hide')
        }
      }
    }
</script>

<style lang="stylus">
</style>
